import { useLocation, useNavigate } from "react-router-dom";
import { Login } from "./biz/Login";
import { useContext, useEffect } from "react";
import { Global } from "./main";
import { Dashboard } from "./biz/Dashboard";
import { Material } from "./biz/Material";
import { AppHeader } from "./biz/AppHeader";
import { Project } from "./biz/Project";
import { Provider } from "./biz/Provider";
import { Acount } from "./biz/Acount";
import { Payment } from "./biz/Payment";
import { ProjectOverview, ProviderOverview } from "./biz/Overview";
import { Contract } from "./biz/Contract";
import { Invoice } from "./biz/Invoice";

export const routes = [
  {
    path: '/login',
    element: <Login />,
    auth: false
  },
  {
    path: '/',
    element: <AppHeader></AppHeader>,
    auth: true,
    children: [
      {
        path: '',
        element: <Material />,
        auth: true
      },
      {
        path: 'project',
        element: <Project />,
        auth: true
      },
      {
        path: 'contract',
        element: <Contract />,
        auth: true
      },
      {
        path: 'provider',
        element: <Provider />,
        auth: true
      },
      {
        path: 'acount',
        element: <Acount />,
        auth: true
      },
      {
        path: 'payment',
        element: <Payment />,
        auth: true
      },
      {
        path: 'invoice',
        element: <Invoice />,
        auth: true
      },
      {
        path: 'overview-project',
        element: <ProjectOverview />,
        auth: true
      },
      {
        path: 'overview-provider',
        element: <ProviderOverview />,
        auth: true
      }
    ]
  },
]

export function RouteGuard({ children }) {
  const navigate = useNavigate()
  const location = useLocation()
  const {logined, setLogined} = useContext(Global)
  useEffect(() => {
    if (!!!logined && location.pathname !== '/login') {
      navigate("/login")
    }
  }, [location.pathname]);
  return children;
}